<template>
  <CustomNav title="我的" :isShowBack="false"></CustomNav>
  <view class="container">
    <div class="loginContainer">
      <!-- 登录成功 -->
      <div class="login" v-if="loginStatus">
        <view class="logo">
          <button open-type="chooseAvatar" @chooseavatar="handleUploadAvatar">
            <u-image
              :show-loading="true"
              :src="avatarUrl"
              width="200rpx"
              height="200rpx"
            >
              <template v-slot:loading>
                <u-loading-icon color="#ccc"></u-loading-icon>
              </template>
              <template #error>
                <view style="font-size: 24rpx">加载失败</view>
              </template>
            </u-image>
          </button>
        </view>

        <view class="nickname">{{ nickname }}</view>
      </div>

      <!-- 未登录 -->
      <view id="login" v-else @click="handleLogin">
        <view class="btn">立即登录</view>
        <!-- <tag title="立即登录"></tag> -->
        <view class="msg">您还没有登录哟，立即登录查看更多内容~</view>
      </view>
    </div>

    <view class="main">
      <view class="inputBox" @click="handleViewAllOrder">
        <view class="text">
          <i class="iconfont icon-dingdan"></i>
          <view>全部订单</view>
        </view>
        <view class="ipt">
          <view class="input">
            <!-- <input placeholder="请输入服务项目" v-model="projectName" /> -->
          </view>
          <view class="arrow"><i class="iconfont icon-arrow-right"></i></view>
        </view>
      </view>
      <view class="inputBox" @click="handleLove">
        <view class="text">
          <i class="iconfont icon-guanzhu-zhihui"></i>
          <view>我的点赞</view>
        </view>
        <view class="ipt">
          <view class="input">
            <!-- <input placeholder="请输入服务项目" v-model="projectName" /> -->
          </view>
          <view class="arrow">
            <i class="iconfont icon-arrow-right"></i>
          </view>
        </view>
      </view>
      <view class="inputBox" @click="handleUserInfo">
        <view class="text">
          <i class="iconfont icon-tishi"></i>
          <view>我的信息</view>
        </view>
        <view class="ipt">
          <view class="input">
            <!-- <input placeholder="请输入服务项目" v-model="projectName" /> -->
          </view>
          <view class="arrow"><i class="iconfont icon-arrow-right"></i></view>
        </view>
      </view>
      <view class="inputBox" @click="contactCustomerService">
        <view class="text">
          <i class="iconfont icon-kefu1"></i>
          <view>联系客服</view>
        </view>
        <view class="ipt">
          <view class="input">
            <!-- <input placeholder="请输入服务项目" v-model="projectName" /> -->
          </view>
          <view class="arrow"><i class="iconfont icon-arrow-right"></i></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import CustomNav from "@/components/CustomNav/index.vue";
import { getItem, updateItem } from "@/utils/localStorage";
import { getToken } from "@/utils/auth";
import env from "@/utils/env";
import { Alert, unAlert } from "@/utils/tool";

const handleLogin = () => {
  uni.navigateTo({
    url: "/pagesD/oneClickLogin/index",
  });
};

// 头像
const avatarUrl = ref("");
// 昵称
const nickname = ref("");

onShow(() => {
  avatarUrl.value = getItem("userInfo").headImg;
  nickname.value = getItem("userInfo").username;
});

// 更换头像
const handleUploadAvatar = (e) => {
  console.log("e：", e);
  const url = e.detail.avatarUrl;
  uni.uploadFile({
    url: `${env.baseUrl}/cloth/file/upload?clientId=${getItem("userInfo").id}`,
    fileType: "image",
    filePath: String(url),
    name: "uploadFile",
    header: {
      Authorization: getToken(), //携带token
    },
    formData: {
      id: getItem("userInfo").id,
      uploadFile: String(url),
    },
    success(res) {
      let result = JSON.parse(res.data);

      console.log("result:", result.data);

      Alert("更换中...", "loading", 0, true);
      if (result.code == 200) {
        unAlert();
        Alert("更换成功", "success");
        avatarUrl.value = result.data;
        updateItem("userInfo", "headImg", result.data);
      }
    },
    complete() {
      // Alert("更换中...", "loading", 0, true);
    },
  });
};

// 全部订单
const handleViewAllOrder = () => {
  uni.navigateTo({
    url: "/pagesD/allOrder/index",
  });
};

// 我的点赞
const handleLove = () => {
  uni.navigateTo({
    url: "/pagesD/userLoveGuestFilm/index",
  });
};

// 我的信息
const handleUserInfo = () => {
  uni.navigateTo({
    url: "/pagesD/userInfo/index",
  });
};

// 联系客服
const contactCustomerService = () => {
  uni.navigateTo({
    url: "/pagesA/onlineConsultation/index",
  });
};

// 默认不显示
const loginStatus = ref(false);
// 是否显示login状态
onShow(() => {
  loginStatus.value = getItem("token") ? true : false;
});
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 90vh;
  width: 100vw;
  background-color: #efefef;
  padding: 0 25rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .loginContainer {
    width: 100%;

    .login {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .logo {
        width: 230rpx;
        height: 230rpx;
        background-color: #fff;
        margin-top: 80rpx;
        padding: 15rpx;
        box-sizing: border-box;

        button {
          width: 100%;
          height: 100%;
          padding: 0;
          background: transparent;
          /*设置背景颜色一致*/
          border-color: transparent;
          /*设置边框颜色一致*/
          display: flex;
          align-items: center;
          justify-content: space-between;

          &::after {
            border: none;
            /*设置边框取消*/
          }
        }
      }

      .nickname {
        font-size: 34rpx;
        font-weight: 700;
        color: #000;
        margin-top: 25rpx;
        margin-bottom: 30rpx;
      }
    }

    // 未登录
    #login {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 150rpx 0;
      margin-bottom: 70px;

      .btn {
        padding: 13rpx 50rpx;
        border: 1px solid #fac049;
        border-radius: 8rpx;
        color: #fac049;
      }

      /* #ifdef MP-WEIXIN */
      .wxBtn {
        background-color: transparent;
        border: 1px solid #fac049;
        border-radius: 8rpx;
        color: #fac049;
        // padding: -5rpx 50rpx;

        &::after {
          border: none;
        }

        // 按钮按下
        &:active {
          background-color: rgba(0, 0, 0, 0.2);
        }
      }

      /* #endif */

      .msg {
        font-size: 28rpx;
        color: #fac049;
        margin-top: 35rpx;
      }
    }
  }

  .main {
    width: 100%;
    margin-top: 20rpx;

    .inputBox {
      width: 100%;
      display: flex;
      align-items: center;
      // border: 2px solid #fbda97;
      border-radius: 12rpx;
      padding: 30rpx 55rpx;
      padding-right: 0;
      margin-bottom: 16rpx;
      background-color: #fff;
      padding-left: 36rpx;

      .text {
        display: flex;
        align-items: center;

        .iconfont {
          margin-right: 20rpx;
          font-weight: 900;
        }
      }

      .ipt {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1;
        padding-left: 30rpx;
        padding-right: 40rpx;

        .input {
          input {
            font-size: 28rpx;
            color: #9b9b9b;
          }
        }
      }
    }
  }
}
</style>
